<template>
<view class="diary-header"  :style="{backgroundColor: backgroundColor, height: height + 'px'}">
  <view class="navbar-com"  :style="{height: boundRect?.top + 'px'}" > </view>
  <view class="diary-header-item" :style="{height: boundRect?.height + 'px'}"  >
    <slot name="left" ></slot>
    <slot name="center" ></slot>

    <view name="Placeholder" :style="{width: boundRect.width / 2 + 'px'}" ></view>
  </view>
</view>
</template>
<script lang='ts' setup >
import { onShow } from '@dcloudio/uni-app';
import { computed, withDefaults } from 'vue';
import { ref, defineProps } from 'vue';


// 往下滚动300px 背景色变为纯白
export interface IProps {
  posY: number,
  backgroundColor: string
}

const props = withDefaults(defineProps<IProps>(), {
  posY: 0,
  backgroundColor: 'transparent'
}) 

const height = ref(0)
const boundRect = ref()

const transparency = computed(() => {
  const rate = props.posY / 300
  return rate > 1 ? 1 :  rate
})

onShow(() => {
  const res = uni.getMenuButtonBoundingClientRect()
  boundRect.value = res
  height.value = res.bottom + 12
})


</script>
<style lang='less' scoped >
 .diary-header {
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    .navbar-com {
      width: 100vw;
    }
    .diary-header-item {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 48rpx;
      box-sizing: border-box;
    }
  }
</style>